<script lang="ts" setup>
import {
  blog_category_del_api,
  blog_category_get_api,
  blog_category_post_api,
  blog_category_put_api
} from "@api/blog.ts";
import {TreeOption} from "naive-ui";

const dialog = useDialog()
const showDropdown = ref(false)
const showEdit = ref(false)
const dropdownAction = ref('add')
const dropdownPosition = ref({x: 0, y: 0})
const data = ref([{id: 0, name: 'root', children: []}])
const current = ref({id: 0, name: '', level: 0})
const edit_name = ref('')
const drop_options = computed(() => {
  return current.value.id === 0 ? [{label: '添加分类', key: 'add'}] : [{
    label: '添加分类',
    key: 'add'
  }, {label: '修改分类', key: 'edit'}, {label: '删除分类', key: 'del'}]
})
const nodeProps = ({option}: { option: TreeOption }) => {
  return {
    onContextmenu(e: MouseEvent): void {
      current.value = {id: option.id as number, name: option.name as string, level: option.level as number}
      showDropdown.value = true
      dropdownPosition.value.x = e.clientX
      dropdownPosition.value.y = e.clientY
      e.preventDefault()
    }
  }
}
const dropdownSelect = (key: string) => {
  dropdownAction.value = key
  if (key === 'del') {
    dialog.warning({
      positiveText: '确定',
      negativeText: '取消',
      title: '编辑分类',
      content: `确认删除分类 ${current.value.name} ?`,
      onPositiveClick: async () => {
        await blog_category_del_api(current.value.id)
        await loadData()
      }
    })
  } else if (key === 'edit'){
    edit_name.value = current.value.name
    showEdit.value = true
  }else {
    showEdit.value = true
  }

}

const submitEdit = async () => {
  let action = dropdownAction.value
  if (action === 'add') {
    await blog_category_post_api({name: edit_name.value, parent_id: current.value.id})
  }
  if (action === 'edit') {
    await blog_category_put_api({name: edit_name.value, id: current.value.id})
  }
  if (action === 'del') {
    await blog_category_del_api(current.value.id)
  }
  await loadData()
  showEdit.value = false
}

async function loadData() {
  data.value[0].children = await blog_category_get_api()
}

onMounted(() => {
  loadData()
})
</script>
<template>
  <n-tree :data="data" label-field="name" key-field="id" :node-props="nodeProps" default-expand-all></n-tree>
  <n-dropdown
      trigger="manual"
      placement="bottom-start"
      :show="showDropdown"
      :options="drop_options"
      :x="dropdownPosition.x"
      :y="dropdownPosition.y"
      @select="dropdownSelect"
      @clickoutside="showDropdown=false"
  />
  <n-modal v-model:show="showEdit">
    <div class="edit-form-box">
      <h2>编辑分类</h2>
      <n-form :show-label="false">
        <n-form-item>
          <n-input v-model:value="edit_name" placeholder="分类名称"></n-input>
        </n-form-item>
        <n-form-item>
          <n-button type="primary" @click="submitEdit"> 提交</n-button>
        </n-form-item>
      </n-form>
    </div>
  </n-modal>
</template>
<style scoped>
.edit-form-box {
  background: #fff;
  padding: 14px;
  width: 600px;
}

</style>
